<template>
  <view class="uni-list">
    <view class="uni-list-cell">
      <view class="uni-list-cell-left">
        楼栋名：
      </view>
      <view class="uni-list-cell-db">
        <picker @change="AUChange" :value="AUID" :range="AU" :range-key="'value'">
          <view class="uni-input">{{AU[AUID].value}}</view>
        </picker>
      </view>
    </view>
    <view class="uni-list-cell">
      <view class="uni-list-cell-left">
        楼层：
      </view>
      <view class="uni-list-cell-db">
        <picker @change="FSChange" :disabled="isFS" :value="FID" :range="FS" :range-key="'value'">
          <view class="uni-input">{{FS[FID].value}}</view>
        </picker>
      </view>
    </view>
    <view class="uni-list-cell">
      <view class="uni-list-cell-left">
        房间名：
      </view>
      <view class="uni-list-cell-db">
        <picker @change="RMChange" :value="RID" :range="RM" :range-key="'value'" :disabled="isRM">
          <view class="uni-input">{{RM[RID].value}}</view>
        </picker>
      </view>
    </view>

    <view class="PRate-show-container" v-show="du">
      <image src="../../static/asset/nfbg.jpg" mode=""></image>
      <view class="backdrop-filter"></view>
      <view class="find-room">
        <view class="find-room-lab">
          当前宿舍是
        </view>
        <view class="find-room-d">
          {{AUNmber}}
        </view>
        <view class="find-room-r">
          {{ room +" "}}宿舍
        </view>

      </view>
      <view class="PRate-now-lab">
        当前剩余
      </view>
      <view class="PRate-show">
        <view class="PRate-now-show">
          {{du}}
        </view>
        <view class="PRate-now-show-du">
          度
        </view>
      </view>
      <view class="find-time">
        查询时间:{{time}}
      </view>
    </view>

  </view>



</template>

<script>
  import getPR from "@/u_api/getPRate.js"
  export default {
    data() {
      return {
        FS: [{
          value: "请选择",
          key: 0
        }], // 楼层列表
        FID: 0, // 选中的数组索引
        AU: [{
          value: "请选择",
          key: 0
        }], // 楼栋列表
        AUID: 0,
        RM: [{
          value: "请选择",
          key: 0
        }], // 当前栋房间列表
        RID: 0,
        du: 0, //电费度数
        time: 'null-213', //查询时间
        room: '', //房间号 
        AUNmber: "" //所在的栋

      }
    },
    async created() {
      //获取楼栋信息，有缓存则直接从缓存拿
      let AU = uni.getStorageSync("AU");
      if (!AU) {
        AU = await getPR.getRoomInfo(getPR.AUrl);
        uni.setStorageSync("AU", AU);
      }
      this.pushValue(AU, this.AU, "AU");
      const PR = uni.getStorageSync('PRateInfo');
      if (PR) {
        for (let i in PR) {
          if (typeof PR[i] !== "object") continue
          this.setArr(this[i], PR[i])
        }
        this.ROOMID = PR.ROOMID;
        await this.getPR()
      }
    },
    methods: {
      async AUChange(e) { //根据楼栋KEY值获取楼层，一般有1到5楼，但是有的楼不止5层
        if (this.AU[e.detail.value].value === "请选择") return
        this.du = 0;
        this.AUID = e.detail.value
        this.AUNmber = this.AU[this.AUID].value;
        const FS = await getPR.getRoomInfo(getPR.FUrl, this.AU[this.AUID].key)
        this.pushValue(FS, this.FS)
      },
      async FSChange(e) {
        if (this.AU[e.detail.value].value === "请选择") return
        this.FID = e.detail.value;
        const RM = await getPR.getRoomInfo(getPR.RUrl, this.AU[this.AUID].key, this.FS[this.FID].key);
        this.pushValue(RM, this.RM);

      },
      async RMChange(e) {
        if (this.RM[e.detail.value].value === "请选择") return
        this.RID = e.detail.value;
        this.room = this.RM[this.RID].value;
        this.ROOMID = this.RM[this.RID].key;
        await this.getPR()
        if (this.du) {

          uni.setStorageSync("PRateInfo", {
            FS: {
              value: this.FS[this.FID].value,
              key: this.FS[this.FID].key
            },
            RM: {
              value: this.RM[this.RID].value,
              key: this.RM[this.RID].key
            },
            AU: {
              value: this.AU[this.AUID].value,
              key: this.AU[this.AUID].key
            },
            ROOMID: this.ROOMID

          })
        }



      },
      setArr(arr, value) {
        arr.shift()
        arr.unshift(value)
      },
      async getPR() {
        const PRate = await getPR.getPRate(this.ROOMID);
        this.room = this.RM[this.RID].value;
        this.AUNmber = this.AU[this.AUID].value;

        if (!PRate) {
          this.fail();
          return
        }
        this.du = PRate.remainPower;
        this.time = PRate.resultInfo.timeStamp;
      },
      pushValue(arr, pushTarget, storageName) {
        if (arr.length > 0) {
          while (pushTarget.length > 1) {
            pushTarget.pop();
          }
          arr.forEach((item) => {
            pushTarget.push(item)
          })
        } else {
          this.fail()
        }
      },
      fail() {
        uni.showToast({
          title: "失败,接口已更改",
          duration: 2500,
          icon: "error"

        })
      }

    },
    computed: {
      isFS() {

        return this.FS.length <= 1
      },
      isRM() {

        return this.RM.length <= 1
      }
    }
  }
</script>

<style scoped>
  .uni-list {
    font-size: 20px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: "宋体";
    transition: 0.6s;
    overflow: hidden;
  }

  .uni-list-cell {

    display: flex;
    height: 70rpx;
    padding: 10px;
    background-color: #ffffff;
    margin-top: 10px;
    align-items: center;

  }

  .uni-list-cell-left {
    padding: 0 10px;
    width: 30%;
    text-align: right;
    flex-shrink: 1;
    box-sizing: border-box;
  }

  .uni-list-cell-db {
    border: 1px solid #c3c3c3;
    flex: 1 1;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
  }

  >>>.uni-list-cell,
  .PRate-show-container {
    width: 90%;
    transform: translateX(2.5%);
    border-radius: 8px;
    box-shadow: 1px 0px 1px #c3c3c3,
      -1px 0px 3px #c3c3c3;
  }

  /* 卡片样式 */
  .PRate-show-container {
    position: relative;
    height: 404rpx;
    width: 95%;
    transform: translate(2.5%, 40px);
    box-sizing: border-box;
    /* background-image: url('@/static/asset/nfbg.jpg'); */
    background-color: green;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* background: rgba(255, 255, 255, 0.2); */
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
    color: #409eff;
    font-weight: 700;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 666;
  }

  .PRate-show-container image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  
  .backdrop-filter{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;    
    /* margin: 100rpx; */
    backdrop-filter: blur(5px);
    /* background-color: rgba(255,255,255,0.72); */
  }

  .find-room,
  .PRate-now-lab {
    display: flex;
    transform: translateX(6%);
    margin-top: 20rpx;
  }

  .find-room-d,
  .find-room-r {
    flex: 1 1;
  }

  .find-room-lab {
    width: 35%;
    flex-shrink: 1;
  }

  .PRate-show {
    display: flex;
    justify-content: center;
  }

  .PRate-now-show {
    font-size: 70px;

  }

  .PRate-now-show-du {
    line-height: 200rpx;
    margin-left: 10rpx;

  }

  .find-time {
    transform: translate(29%, -10px);
    font-size: 35rpx;
    color: #409eff;
    font-weight: 700;
  }
</style>
